<template>
    <div>
        <el-card class="card-box">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div v-if="ruleForm.sign != '1'">
                    <mytitle>基本信息</mytitle>
                    <el-form-item label="品种名称" prop="varietyName" style="width: 320px;" >
                        <el-input  type="text" v-model="ruleForm.varietyName" placeholder="请输入品种名称" />
                    </el-form-item>
                    <el-form-item label="品种图片" prop="varietyPicture">
                        <mysend :picUrl="ruleForm.varietyPicture" @getUrl="getMypic1" />
                    </el-form-item>
                    <mytitle>产出物</mytitle>
                    <el-form-item label="产出物名称" prop="outputGoods" style="width: 320px;" >
                        <el-input  type="text" v-model="ruleForm.outputGoods" placeholder="请输入产出物名称" />
                    </el-form-item>
                    <el-form-item label="产出部位" prop="part">
                        <el-select  v-model="ruleForm.part" placeholder="请选择产出部位">
                            <el-option v-for="(item, index) in options" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <div></div>
                    <el-form-item label="产出图片" prop="outputGoodsPicture">
                        <mysend :picUrl="ruleForm.outputGoodsPicture" @getUrl="getMypic2" />
                    </el-form-item>
                    <mytitle>农业配置</mytitle>
                    <el-form-item label="农业操作" prop="farmOperatorS">
                        <el-select  v-model="ruleForm.farmOperatorS" multiple placeholder="请选择农业操作"
                            v-loading="loading" @visible-change="varietyChange">
                            <el-option v-for="item in varietyType" :key="item.id" :value="item.name"
                                :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <div>
                        <el-form-item>
                            <el-button @click="submitForm('ruleForm')" type="success" >保存</el-button>
                            <el-button @click="deleteRow()" type="danger"  v-if="$route.query.id">删除</el-button>
                            <el-button @click="$router.go(-1)" type="warning"  plain>返回</el-button>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { findVarietyById, findAllFarmOperator, addVariety, removeVarietyById } from '../util/api.js'
export default {
    data() {
        return {
            loading: false,
            loading1: false,
            tableData: [],
            ruleForm: {
                id: '',
                varietyName: "",
                varietyPicture: "",
                outputGoods: "",
                part: "",
                outputGoodsPicture: "",
                farmOperatorS: []
            },
            landId: "",
            options: ['根', '茎' ,'叶','花','果实','种子'],
            varietyType: [],
            rules: {
                varietyName: [
                    { required: true, message: '请输入品种名称', trigger: 'blur' },
                ],
                outputGoods: [
                    { required: true, message: '请输入产出物名称', trigger: 'blur' },
                ],
                varietyPicture: [
                    { required: true, message: '请至少选择一张品种图片', trigger: 'blur' }
                ],
                outputGoodsPicture: [
                    { required: true, message: '请至少选择一张产出物图片', trigger: 'blur' }
                ],
                part: [
                    { required: true, message: '请选择产出部位', trigger: 'change' }
                ],
                farmOperatorS: [
                    { type: 'array', required: true, message: '请至少选择一个农事操作', trigger: 'change' }
                ]
            }
        }
    },
    mounted() {
        if(this.$route.query.id)this.getDetail() 
    },
    methods: {
        async getDetail() {
            let res = await findVarietyById({ varietyId: this.$route.query.id })
            if (res.code != 200) return
            console.log(res)
            this.ruleForm = res.data
            this.ruleForm.farmOperatorS = res.data.farmOperatorS
        },
        async findAllFarmOperator() {
            this.loading = true
            let res = await findAllFarmOperator()
            // console.log(res)
            if (res.code != 200) return
            this.varietyType = res.data.rows
            this.loading = false
        },
        varietyChange(val) {
            if (val) this.findAllFarmOperator()
        },
        getMypic1(res){
            if(res){
                this.ruleForm.varietyPicture= res
            }
        },
        getMypic2(res){
            if(res){
                this.ruleForm.outputGoodsPicture = res
            }
        },
        deleteRow() {
            // console.log(this.ruleForm.id)
            this.$confirm('此操作将永久删除该品种, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await removeVarietyById(this.ruleForm.id)
                if(res.code!=200)return this.$message.error(res.msg)
                this.$router.go(-1)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let res = await addVariety(this.ruleForm)
                    if (res.code != 200) return
                    this.$message.success('编辑成功！')
                    this.$router.go(-1)
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>
<style lang="less" scoped>
.card-box {
    width: 100%;
    height: 100%;

    .avatar {
        width: 146px;
        height: 146px;
        border-radius: 5px;
    }

    .demo-ruleForm {
        width: 100%;
        .el-form-item {
            display: inline-block;
        }
    }
}

/deep/.is-checked .el-radio__label {
    color: #01B780 !important;
}

/deep/.is-checked .el-radio__inner {
    color: #01b780 !important;
    background-color: #01B780 !important;
}

.totalArea {
    width: 100%;

    .totalArea-item {
        display: flex;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        text-align: center;
        gap: 10px;
        margin: 10px 0;
    }
}
</style>
